邦友wordsmith在http://ithelp.ithome.com.tw/question/10001977推了jaceju大大「自製 jQuery Plugin - Part 1」,連到樂多的貼文,已經失聯了,
是2008~2009年的事,看起來把文章放在IT邦比較安全。GOOGLE一下,在http://www.jaceju.net/blog/archives/336/還是找得到。
Part2在http://www.jaceju.net/blog/archives/337/,
另外fillano大牛也寫了Javascript面面觀:網頁篇《jQuery inside - plugin》在http://ithelp.ithome.com.tw/question/10032753另一篇Javascript面面觀:網頁篇《jQuery inside - 核心架構》也可以合併來看,
特別是他寫道
大體來說,jQuery其實是一個大facade,透過他的定義好的操作方法,就可以簡單地操作DOM,並且可以透過一些方式延伸及擴充功能。(但不是繼承,你要嘛就是用他的功能,要嘛就是擴充他,不過很難繼承)
,於筆者心有戚戚。
2009年的jQuery才4千多行,一路走來,還是維持著微核心。
現在2012年,筆者踩在前人走過的路上。別有一番滋味。jQuery仍然成長枝繁葉茂,分出一些新專案,生生不息。
這裏簡單翻譯一下DIY plugin的過程。
摘錄自http://docs.jquery.com/Plugins/Authoring
起步:
框架,形。
jQuery.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
但是一般人不這樣寫,引用多個類別庫,會有變數覆蓋的問題,
所以打包一下。
變成
(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})( jQuery );
所以plugin框架是長成這個樣子。
文中提到,IIFE (Immediately Invoked Function Expression) ,筆者還是第一次看到。
這樣寫,才可以安心的用**$**.
再來是Context(內文),讓plugin實際做一點事。
(function( $ ){
$.fn.myPlugin = function() {
// there's no need to do $(this) because
// "this" is already a jquery object
// $(this) would be the same as $($('#element'));
this.fadeIn('normal', function(){
// the this keyword is a DOM element
});
};
})( jQuery );
使用方法:
$('#element').myPlugin();
筆者覺得如果要快速入門的話,以官方手冊的這個例子為佳,一開始不宜講太多,會讓筆者心生恐懼。
或是下一個例子,
(function( $ ){
$.fn.maxHeight = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max;
};
})( jQuery );
使用方法:
var tallest = $('div').maxHeight(); // Returns the height of the tallest div
然後,分開幾天,
練習其他的主題,
手冊裏其餘的部分,
如Maintaining Chainability(讓你的plugin有chain 的能力)
,Defaults and Options(讓你的plugin有預設值和選項)
,Namespacing(命名空間)
,Plugin Methods(多個方法可用)
,Events(事件)
,Data(維護state)
最後還有最佳體驗(Summary and Best Practices)
小結:冒然的想去追蹤jQuery源碼,基本上是很容易失焦且困難重重的路,
會用了,且會寫Plugin, 再回頭看jQuery源碼,也許阻力會小些。
timloo提到:
小結:冒然的想去追蹤jQuery源碼,基本上是很容易失焦且困難重重的路,
會用了,且會寫Plugin, 再回頭看jQuery源碼,也許阻力會小些。
畫龍點睛!嚴重力推!